{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iocs-ENN</title>
    <link rel="shortcut icon" href='{% static "images/favicon.ico" %}'>
    <link rel="stylesheet" href='{% static "plugins/element-ui-2.15.6/lib/theme-chalk/index.css" %}'>
    <style>
        body{
            margin: 0;
            overflow:hidden;
        }
        a {
            cursor:pointer;
        }

        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .autoOverFlow{
            overflow: auto;
        }
        .forbidOverFlow{
            overflow: hidden;
        }
        .hide{
            display: none;
        }
        .myContainer{
            margin: 20px;
            /* background: url("/static/images/EXL50.jpg") 100% 100%; */
            /* background-size: cover; */
        }
        .el-table .success-row {
            background: #f0f9eb;
        }
        .title{
            background-color: #D3DCE6;
            color: #333;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            padding-top: 10px;
        }
        .el-header h4, h3{
            display: inline;
        }
        .el-main{
            padding: 2px !important;
        }

    </style>
    {% block css %}{% endblock %}
</head>
<body>

{% verbatim %}
<div class="myContainer" id="app">
    <el-container>
        <el-header class="title">
            <el-form :inline="true" @submit.native.prevent>
                <el-form-item>
                    <h3><i class="el-icon-s-management"></i>&nbsp;&nbsp;Ioc Records</h3>&nbsp;&nbsp;
                    <h4><i>pvs -> {{currentPV2Ioc}}</i></h4>
                </el-form-item>
                <el-form-item class="right">
                    <el-input v-model="searchKey" @keyup.enter.native="search" placeholder="search key( ioc, ip, pv )"></el-input>
                </el-form-item>

            </el-form>
            
        </el-header>
        <el-main>
            <el-row :gutter="16">
                <el-col :span="5"><div>
                    <el-table :data='iocs' :height='maxHeight' style="width: 100%;"
                    :row-class-name="iocSelectStatus" @cell-click="iocClick" :cell-style="{padding:'0px'}">
                        <el-table-column prop='name' label='ioc' width="160" align="center"></el-table-column>
                        <el-table-column prop='ip__ip' label='ip' align="center"></el-table-column>
                        <el-table-column align="right" width="40">
                            <template slot-scope="scope">
                                <a @click="iocDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i></a>
                            </template>
                        </el-table-column>
                    </el-table>
                    
                </div></el-col>
                <el-col :span="5"><div>
                    <el-table id="pvBox" :data='pvs' :height='maxHeight' style="width: 100%;" border
                    :row-class-name="PVSelectStatus" @row-click="pvClick" :cell-style="{padding:'0px'}">
                        <el-table-column prop='PVName' label='pv' align="center"></el-table-column>
                    </el-table>
                </div></el-col>
                <el-col :span="14"><div>
                    <el-container :style="{ height: maxHeight + 'px', border: '1px solid #eee' }">
                        <el-header>
                            <el-form :inline="true" @submit.native.prevent>
                                <el-form-item label="pv name" v-show="isEdit">
                                    <el-input v-model="pvs[currentPVindex].PVName" ></el-input>
                                </el-form-item>
                                <el-form-item label="type" v-show="isEdit">
                                    <el-input v-model="pvs[currentPVindex].type"></el-input>
                                </el-form-item>
                                <h3 v-show="!isEdit">pv name: {{pvs[currentPVindex].PVName}} &nbsp;&nbsp;&nbsp;&nbsp; type: {{pvs[currentPVindex].type}}</h3>

                                <el-button type="danger" size="small" icon="el-icon-delete" class="right" @click="PVDelete">删除</el-button>
                                <el-button type="primary" size="small" icon="el-icon-edit" class="right" @click="isEdit=true">修改</el-button>
                                <el-button type="success" size="small" icon="el-icon-plus" class="right" @click="pvAdd">新增</el-button>
                            </el-form>

                        </el-header>
                        <el-main class="autoOverFlow">
                            <h3>&nbsp;&nbsp;fields:</h3>
                            <el-table :data='pvs[currentPVindex].fields' stripe style="width: 100%;" :cell-style="{padding:'0px'}">
                                <el-table-column>
                                    <template slot-scope="scope">
                                        <el-input v-show="isEdit" v-model="scope.row.key"></el-input>
                                        <div v-show="!isEdit">{{scope.row.key}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column>
                                    <template slot-scope="scope">
                                        <el-input v-show="isEdit" v-model="scope.row.value"></el-input>
                                        <div v-show="!isEdit">{{scope.row.value}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column align="right" width="80">
                                    <template slot-scope="scope">
                                        &nbsp;&nbsp;<a v-show="isEdit" @click="fieldsAdd(scope.$index, scope.row)"><i class="el-icon-plus"></i></a>
                                        &nbsp;&nbsp;<a v-show="isEdit" @click="fieldDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i></a>
                                    </template>
                                </el-table-column>
                            </el-table>

                        </el-main>
                        <el-footer>
                            <el-button type="danger" size="small" icon="el-icon-save" @click="iocSave">保存,提交并重启服务</el-button>
                        </el-footer>
                    </el-container>
                </div></el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
{% endverbatim %}

<script src='{% static "plugins/jquery-3.4.1.min.js" %}'></script>
<script src='{% static "plugins/jquery.cookie.js" %}'></script>
<script src='{% static "plugins/vue-2.6.14/vue.js" %}'></script>
<script src='{% static "plugins/element-ui-2.15.6/lib/index.js" %}'></script>
<script>
    /* 以下为：JS方法中被调用的几个工具方法 */
    
    /* vue init */
    function initVue(iocs,pvs) {
        var app = new Vue({
            el: '#app',
            data: {
                iocs: iocs,
                pvs: pvs,
                currentIocindex: 0,
                currentPVindex: 0,
                currentPV2Ioc: '*',
                searchKey: '',
                isEdit: false,
            },
            methods: {
                iocSelectStatus({row, rowIndex}){
                    // 添加 index 字段
                    row.index = rowIndex;
                    // 设置当前选中
                    if (rowIndex === this.currentIocindex) {
                        return 'success-row';
                    } else {
                        return '';
                    }
                },

                PVSelectStatus({row, rowIndex}){
                    // 添加 index 字段
                    row.index = rowIndex;
                    // 设置当前选中
                    if (rowIndex === this.currentPVindex) {
                        return 'success-row';
                    } else {
                        return '';
                    }
                },

                iocClick(row,column,cell){
                    if (cell.innerText != ""){
                        this.currentIocindex = row.index;
                        this.currentPV2Ioc = iocs[row.index].name + '.db';
                        this.isEdit = false;

                        let ths = this;
                        $.ajax({
                            url: "{% url 'app_iocs:iocs' %}",
                            type: "POST",
                            headers: {"X-CSRFToken": $.cookie("csrftoken")},
                            data: {
                                'otype':'getPVs',
                                'ioc': row.name,
                            },
                            dataType: "JSON",
                            success: function(res) {
                                if(res.status){
                                    ths.pvs = $.parseJSON(res.pvs);
                                    ths.currentPVindex = 0;
                                }else{
                                    ths.$message({
                                        showClose: true,
                                        message: '获取pv失败'+res.err,
                                        type: 'error',
                                        duration: 5000,
                                    });
                                };
                            },
                        });
                    }

                },

                pvClick(row){
                    this.currentPVindex = row.index;
                    this.isEdit = false;
                },

                iocDelete(index,row){
                    this.$message({
                        showClose: true,
                        message: '删除'+row.name+'待开发',
                        type: 'info',
                        duration:5000,
                    });
                },
                
                search(){
                    if (this.searchKey != ""){
                        this.$message({
                            showClose: true,
                            message: '关键词'+this.searchKey+'待开发',
                            type: 'info',
                            duration:5000,
                        });

                    }
                },
                
                fieldsAdd(index,row){
                    let r_data = { 'key': '', 'value': '', };
                    this.pvs[this.currentPVindex].fields.splice(index + 1, 0, r_data,);
                },
                
                fieldDelete(index,row){
                    this.pvs[this.currentPVindex].fields.splice(index,1,);
                },

                pvAdd(){
                    this.currentPVindex = this.pvs.length;
                    this.pvs.push({type:"",PVName:"pvName",index:this.currentPVindex, fields:[{"":""}]});

                    var container = document.getElementById("pvBox").querySelector('.el-table__body-wrapper');
                    container.scrollTop = container.scrollHeight;

                    this.isEdit = true;
                },

                PVDelete(){
                    if (this.pvs.length > 1){
                        this.pvs.splice(this.currentPVindex,1,);
                        this.currentPVindex = this.currentPVindex === 0 ? 0 : this.currentPVindex - 1;
                    } else {
                        this.$message({
                            showClose: true,
                            message: 'pv 仅剩一个不可删除.',
                            type: 'error',
                            duration: 5000,
                        });
                    }
                },

                iocSave(){
                    this.isEdit = false;
                    this.currentPVindex = 0;

                    let ioc_name = this.iocs[this.currentIocindex].name;
                    let ths = this;
                    let pvs_new = [];
                    for (let pv of this.pvs){
                        if (pv.PVName != 'pvName' && pv.PVName != '' && pv.type != ''){
                            let fields_new = [];
                            for (let field of pv.fields){
                                if (field.key != '' && field.value != ''){
                                    fields_new.push(field);
                                }
                            }
                            if (fields_new.length>0){
                                pvs_new.push({'PVName':pv.PVName,'type':pv.type,'fields':fields_new});
                            }
                        }
                    }
                    this.pvs = pvs_new;

                    this.$confirm('此操作不可逆, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.ajax({
                            url: "{% url 'app_iocs:iocs' %}",
                            type: "POST",
                            headers: {"X-CSRFToken": $.cookie("csrftoken")},
                            data: {
                                'otype':'iocSave',
                                'ioc': ioc_name,
                                'pvs': JSON.stringify(ths.pvs),
                            },
                            dataType: "JSON",
                            success: function(res) {
                                if(res.status){
                                    ths.$message({
                                        showClose: true,
                                        message: ioc_name+'db文件保存成功',
                                        type: 'success',
                                        duration: 5000,
                                    });
                                }else{
                                    ths.$message({
                                        showClose: true,
                                        message: res.err,
                                        type: 'error',
                                        duration: 5000,
                                    });
                                };
                            },
                        });
                    }).catch(() => {});
                }
            },
            computed: {
                /* 表格最大高度 */
                maxHeight: function () {
                    return window.innerHeight-81;
                },
            },
            mounted() {
                this.currentPV2Ioc = iocs[0].name + '.db';
            }
        })
    }


    $(function(){
        /* init */
        // 接收参数
        try{
            var iocs = $.parseJSON('{{ iocs|safe }}');
            var pvs = $.parseJSON('{{ pvs|safe }}');
            initVue(iocs,pvs);
        }catch(e){
            console.log('{{ iocs|safe }}');
            console.log('{{ pvs|safe }}');
            alert('未知错误');
            alert(e);
            window.close();
        };
    });


</script>
{% block js %}{% endblock %}
</body>
{% block bodyout %}{% endblock %}
</html>